<template>
<!--我的订单-->
  <div class="orders">
      <div class="titleWrap font14">
        <p class="titleName">我的学习币</p>
        <!--<router-link to="/xieyi" class="pull-right"><Icon type="ios-information-circle-outline" /></router-link>-->
      </div>
      <div class="banners">
        <p class="mystudyCunt font14">我的学习币：<span>{{this.studyCoinAmount}}</span></p>
      </div>
      <div class=" rechargeUl">
        <Row :gutter="16">
          <Col span="8" class="rechargeList" v-for="(charge,index) in charges" :key="index" >
            <div class="rechargeInner" @click="chooseStoin(index,charge.id)"  :class="{rechargeActive:index === nowCoinIndex}">
              <p class="countNum"><span>{{charge.discount}}</span>学习币</p>
              <p class="paymoney">¥{{charge.amount}}</p>
            </div>
          </Col>
        </Row>
      </div>
      <p class="paytitle font14">支付方式</p>
      <ul class="payways">
        <li :class="{payActive:payIndex === 1}" @click="choosePayType(1)"><img src="../../assets/zfb.png" /></li>
        <li :class="{payActive:payIndex === 2}" @click="choosePayType(2)"><img src="../../assets/buy2.png" width="26" />微信支付</li>
      </ul>
      <div class="payout"><a href="javascript;:" class="btntheme font14" @click.stop.prevent="recharge()">立即充值</a></div>
      <Modal class-name="vertical-center-modal"  v-model="isShow"  footer-hide width="300px" @on-cancel="modalChange">
        <ul class="model_content">
          <li v-if="pay.payType === 1">支付宝扫码支付</li>
          <li v-if="pay.payType === 2">微信扫码支付</li>
          <li><img :src="pay.url" alt="" width="251"></li>
          <li>支付成功后，系统将自动为您充值学习币</li>
        </ul>
      </Modal>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">

  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .model_content{
    text-align: center;
    padding: 20px 0;
    li:first-child{
      color: #333;
      font-size: 16px;
      /*margin-bottom: 30px;*/
    }
    li:nth-child(3){
      color: #ff3300;
      font-size: 24px;
      /*margin: 20px 0;*/
    }
    li:last-child{
      font-size: 12px;
      color: #999;
    }
  }
  .titleWrap {
    height: 40px;
    /*font-size: 14px;*/
    padding-bottom: 20px;
    text-align: justify-all;
    border-bottom: 1px solid #E1E1E1;
    margin-bottom: 20px;
    color: #957960;
    .titleName {
      float: left;
      line-height: 24px;
      border-bottom: 3px solid #957960;
      padding-bottom: 13px;
    }
    a{
      font-weight: 700;
      color: #957960;
    }
  }
  .banners {
    background: url('../../assets/back.png') no-repeat center center;
    background-size: cover;
    display: block;
    height: 130px;
    padding: 40px;
    .mystudyCunt {
      /*font-size: 16px;*/
      color: #fff;
      span {
        font-size: 30px;
      }
    }
  }
  .rechargeUl {
    padding: 10px 0;
    .rechargeList {
      padding: 8px;
      text-align: center;
      background-color: #fff;
      .rechargeInner {
        height: 70px;
        padding: 3px 0;
        border: 1px solid #E1E1E1;
        cursor: pointer;
        .countNum,.paymoney {
          font-size: 14px;
          color: #666;
          span {
            font-size: 24px;
            color: #333;
            margin-right: 3px;
          }
        }
      }
      .rechargeInner:hover {
        border: 1px solid #20A0FF;
        .paymoney,.countNum, .countNum span {
          color: #20A0FF;
        }
      }
      .rechargeActive {
        border: 1px solid #20A0FF;
        .paymoney ,.countNum,.countNum span{
          color: #20A0FF;
        }
      }
    }
  }
  .paytitle {
    /*font-size: 16px;*/
    color: #333
  }
  .payways {
    margin-top: 15px;
    li {
      display: inline-block;
      width: 130px;
      height: 54px;
      line-height: 54px;
      text-align: center;
      overflow: hidden;
      border: 1px solid #E1E1E1;
      margin-right: 13px;
      cursor: pointer;
      color: #333;
      font-size: 12px;
      img{
        vertical-align: middle;
        margin-right: 5px;
      }
    }
    li:hover, .payActive {
      border: 1px solid #20A0FF;
    }
  }
  .payout {
    text-align: left;
    margin-top: 30px;
    a{
      display: inline-block;
      width: 130px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background-color: #957960;
      color: #fff;
      /*font-size: 16px;*/
    }
  }

</style>
<script type="text/ecmascript-6">
  import {chargeconfigWeb,addOrder,payorderStatusWeb,centreInfoWeb} from '../../http'
  import {getStore} from '../../storage'
  import {imgPathFilter} from '../../myFilters'
    export default {
        inject: ['reload'],
        name: 'orderdetail',
        props: {},
        data() {
            return {
              isSpinShow:false,
              isShow:false,         //扫码框
              studyCoinAmount:0,    //学习币余额
              charges:'',           //充值选择
              nowCoinIndex:0,       //当前选择
              payIndex:1,           //支付选择
              pay:{
                type:'OT_TOP',      //学习币充值
                targetId:-1,        //学习币充值的选择
                applyType: 3,        //申请设备：PC端为3
                payType: 1,          //支付方式：1:支付宝AliPay，2:微信WxPay
                orderId:'',         //创建订单之后，返回订单号
                url:'',
              },
              timer: '',            //定时器
              orderStatus:'',       //后台订单状态
              status:0              //支付状态:0默认值，1未完成，2完成，3关闭
            };
        },
        methods: {
          //监控扫码框变化
          modalChange(){
            clearInterval(this.timer);
          },
          //充值学习币选择
          chooseStoin(index,id){
            this.nowCoinIndex = index;
            this.pay.targetId = id;
          },
          //支付方式选择
          choosePayType(type){
            if(type === 1){
              this.payIndex = 1;
              this.pay.payType = 1;
            }else{
              this.payIndex = 2;
              this.pay.payType = 2;
            }
          },
          //支付二维码生成链接
          payCode(){
            // 支付宝支付
            if(this.pay.payType === 1) {
              window.open("http://api.cbstudy.com/base/common/toPay?payCode=AliPay&transactionType=PAGE&orderId=" + this.pay.orderId);
            }
            //微信支付
            if(this.pay.payType === 2) {
              this.pay.url = 'http://api.cbstudy.com/base/common/toQrPay?transactionType=NATIVE&payCode=WxPay&orderId=' + this.pay.orderId;
              this.isShow = true;
            }
          },
          //充值
          recharge(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //创建订单
                  addOrder({
                    type: this.pay.type,
                    targetId: this.pay.targetId,
                    applyType: this.pay.applyType
                  }).then(res => {
                    this.isSpinShow = false;
                    if (res.code === 200) {
                      //订单创建成功进行支付
                      this.pay.orderId = res.data.orderId;
                      this.payCode();
                      //支付过程中对支付状态的查询与处理
                      //如果已有定时器，先关闭
                      if (this.timer !== null) {
                        clearInterval(this.timer)
                        this.timer = null;
                      }
                      if (this.pay.payType === 2) {
                        //进入计时之前;
                        this.timer = setInterval(() => {
                          //进入计时
                          centreInfoWeb().then(res => {
                            if (res.code === 200) {
                              //订单状态查询
                              payorderStatusWeb({orderId: this.pay.orderId}).then(res => {
                                this.orderStatus = res.data.orderStatus.code;
                                //订单未支付
                                if (this.orderStatus === 'OS_UNPAID') {
                                  this.status = 1;
                                }
                                //订单已完成
                                if (this.orderStatus === 'OS_FINISH') {
                                  // this.status = 2;
                                    clearInterval(this.timer);
                                    this.$Notice.success({
                                      title: '支付结果提醒',
                                      desc: '支付成功',
                                      duration: 3,
                                    });
                                    this.reload()
                                }
                                //订单已关闭
                                if (this.orderStatus === 'OS_CLOSE') {
                                  // this.status = 3;
                                  clearInterval(this.timer);
                                  this.$Notice.warning({
                                    title: "支付结果提醒",
                                    desc: "订单超时，已关闭",
                                    duration: 3,
                                  });
                                  this.isShow = false;
                                }
                              }).catch()
                            }
                          }).catch()
                        }, 3000)
                      }
                    } else {
                      this.$Notice.warning({
                        title: "支付结果提醒",
                        desc: "订单创建失败！",
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$parent.$refs.loginInput.showModal()
                }
              }).catch()
            }
          },
          getCharge(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  chargeconfigWeb({type: 1}).then(res => {
                    if(res.code === 200) {
                      this.isSpinShow = false;
                      //充值配置信息
                      this.studyCoinAmount = res.data.studyCoinAmount;
                      this.charges = res.data.lists;
                      this.pay.targetId = this.charges[0].id;
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "个人中心提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                }else {
                  this.isSpinShow = false;
                }
              }).catch()
            }
          }
        },
        created() {
          this.getCharge();
        },
        destroyed(){
          clearInterval(this.timer);
        },
        components: {
        }
    }
</script>
